<!-- 
 @Author: LW  
 @Date: 2021-08-07 11:30:38  
 @function: 商品编辑框
 -->
<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基础信息" name="first">
        <BasicFrom  ref="basicFromRef" v-bind:formInfo="subformInfo" v-bind:listInfo="listInfo"></BasicFrom> 
      </el-tab-pane>
      <el-tab-pane label="附件资料" name="second">
         <AttachFrom v-bind:formInfo="subformInfo" ></AttachFrom>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer " class="el-dialog__footer">
      <el-button size="mini" @click="closeDialog()">取消</el-button>
      <el-button size="mini" type="primary" :loading="loading" @click="submitForm('modifyInfo')">保存</el-button>
    </div>
  </div>
</template>
<script>

import BasicFrom from "./basic";
import AttachFrom from "./attach";
import GoodsinfoHttp from "@/api/business/goodsinfo"; //http
//定义变量
const {
   loadDetailById,
   saveInfo,//保存商品信息
} = GoodsinfoHttp;

export default {
  //组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，需要通过子组件的 props 选项
  //在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件
  props: ["formInfo","listInfo"], //父界面v-bind:editInfo一致
  components: {
    BasicFrom,
    AttachFrom
  },
  data() {
    return {
      loading: false, //是显示加载
      activeName: "first",
      //商品信息
      subformInfo:{
         baseInfo:{},
         fileInfo:[],
      }
    };
  },
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {},
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {
     //根据Id获取对应的商品和附件信息
     this.loadDetail();
  },
  methods: {
    //根据Id获取对应的商品和附件信息
    loadDetail(){
         if (this.formInfo.id != undefined && this.formInfo.id != null && this.formInfo.id != '') {
          var par = {
            id: this.formInfo.id
          }
          loadDetailById(par).then((response) => {
            let data = response.data
            if (data.Code === 1000) {
              this.subformInfo = data.Data;
            }
          })
        }
    },
    //保存信息
    submitForm(modifyRef) {
      let self = this;
      this.$refs[modifyRef].validate(valid => {
        if (valid) {
          let par = this.formInfo;
          saveInfo(par).then(response => {
              let data = response.data;
              if (data.Code === 1000) {
                self.$messageTip.success(data.Msg); 
                self.$emit("callBack", data.Code);
              } else {
                self.$messageTip.warning(data.Msg);
              }
            });
        } else {
          return false;
        }
      });
    },
    //关闭增加弹出框
    closeDialog() {
      this.$emit("callBack", null);
    },
  }
};
</script>